<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">拼购详情</block>
		</cu-custom>
		<block v-if="detail">
			<view class="bg-white">
				<view class="cu-bar">
					<view class="action text-bold">拼购商品</view>
				</view>
				<view class="space-between padding-lr padding-bottom">
					<view class="cu-avatar lg bg-white">
						<image :src="detail.wholesaleProduct.type==0?detail.wholesaleProduct.product.picture:detail.wholesaleProduct.picture" mode="aspectFill"></image>
					</view>
					<view class="w100 margin-left">
						<view class="text-overflow">{{detail.wholesaleProduct.type==0?detail.wholesaleProduct.product.name:detail.wholesaleProduct.title}}</view>
						<view class="space-between">
							<view class="text-price text-orange margin-top-sm">{{detail.wholesaleProduct.type==0?detail.wholesaleProduct.product.wholesale_price:detail.wholesaleProduct.wholesale_price}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="margin-top bg-white padding flex justify-start align-center" v-if="detail.state == 1">
				<text>截止时间：</text>
				<view class="text-orange">
					<CountDown :value="detail.close_time" :skin="'skin3'" :beforTxt="''"></CountDown>
				</view>
			</view>
			<view class="bg-white margin-top-sm" v-if="detail" style="display: none;">
				<view class="cu-bar">
					<view class="action text-bold">当前进度
					<!-- （{{detail.join_num}}/{{detail.num}}） -->
					</view>
					<view class="action">
						<text v-if="detail.state == 1">待开奖</text>
						<text v-if="detail.state == 2">已开奖</text>
						<text v-if="detail.state == 3">失败</text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item" v-if="detail.member">
						<view class="cu-avatar lg round bg-white">
							<image :src="detail.member.head_portrait" mode="aspectFill"></image>
						</view>
						<view class="content ">
							<view class="text-overflow w100">{{detail.member.nickname}}</view>
							<view class="text-gray margin-top-xs">开团时间：{{$common.timeFormat(detail.created_at)}}</view>
						</view>
						<view class="action">
							<text class="cu-tag bg-orange margin-right-sm sm">团长</text>
						</view>
					</view>
					<view class="cu-item" v-for="(item,index) in detail.logs" :key="index">
						<view class="cu-avatar lg round bg-white">
							<image :src="item.member.head_portrait" mode="aspectFill"></image>
						</view>
						<view class="content ">
							<view class="text-overflow w100">{{item.member.nickname}}</view>
							<view class="text-gray margin-top-xs">参团时间：{{$common.timeFormat(item.created_at,'YYYY-MM-DD')}}</view>
						</view>
						<view class="action">
							<text class="cu-tag bg-red margin-right-sm sm" v-if="item.is_win == 1">拼中</text>
							<text class="cu-tag bg-gray margin-right-sm sm" v-else-if="detail.state == 2">未拼中</text>
						</view>
					</view>

					<view class="cu-item" v-for="(item,index) in detail.robots" :key="index" v-if="detail && detail.robots.length > 0">
						<view class="cu-avatar lg round bg-white">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
						<view class="content ">
							<view class="text-overflow w100">{{item.name}}</view>
							<view class="text-gray margin-top-xs">参团时间：{{$common.timeFormat(detail.created_at,'YYYY-MM-DD')}}</view>
						</view>
						<view class="action" v-if="detail.state==2">
							<text class="cu-tag bg-gray margin-right-sm sm">未中奖</text>
						</view>
					</view>
				</view>

			</view>
			<block v-if="detail.state == 1">
				<view class="margin">
					<view class="cu-btn lg bg-blue w100 round margin-top-xl" @tap="showShare">分享好友参团</view>
				</view>
			</block>
			<block v-if="detail.state == 2">
				<view class="bg-white margin-top-sm">
					<view class="cu-bar">
						<view v-if="detail.mylog && detail.mylog.is_win == 0" class="action text-bold">未拼中</view>
						<view v-if="detail.mylog && detail.mylog.order_id > 0">已拼中</view>
					</view>
				</view>
				<block v-if="detail.mylog && detail.mylog.is_win == 0">
					<view class="cu-form-group">
						<view class="action">支付金额退回</view>
						<view class="content">{{detail.wholesaleProduct.wholesale_price}}元</view>
					</view>
				</block>
				<!-- <view class="cu-form-group" v-if="detail.mylog && detail.mylog.is_win == 0">
					<view class="action">拼购分红</view>
					<view class="content">{{detail.wholesale_reward}}元</view>
				</view> -->
				<block v-if="detail.mylog && detail.mylog.order_id > 0">
					<view class="margin" >
						<view class="cu-btn lg bg-blue w100 round margin-top-xl" @tap="goPage('/pages/shop/order/detail?id='+detail.mylog.order_id)">查看订单详情</view>
					</view>
				</block>
			</block>

		</block>
		<ShareView ref="ShareView"></ShareView>
	</view>
</template>

<script>
	import CountDown from '@/components/default/CountDown.vue'
	import ShareView from '@/components/default/ShareView.vue'
	export default {
		components: {
			CountDown,
			ShareView
		},
		data() {
			return {
				theme: this.$config.THEME(),
				id: 0,
				detail: null,
				member: null,
			};
		},
		onLoad(options) {
			this.id = options.id
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
				return
			}
			if (this.$common.loginAuth(true)) {
				this.getDetail()
			}
		},
		onShow() {
			if (this.$common.loginAuth(true)) {}
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.get('marketing_wholesale_view', {
						id: this.id
					})
					.then((response) => {
						this.detail = response.data.data
						uni.hideLoading()
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
					})
			},
			showShare() {
				if (this.detail) {
					this.$common.getMember().then((member) => {
						this.$refs.ShareView.show({
							type: 'wholesale',
							id: this.detail.wholesaleProduct.product_id,
							thumb: this.detail.wholesaleProduct.product.picture,
							name: this.detail.wholesaleProduct.product.name,
							price: this.detail.wholesaleProduct.product.wholesale_price,
							share_url: this.detail.share_url,
							member_id: member.id,
							member_name: member.nickname,
							member_head: member.head_portrait,
							wholesale_id: this.id,
							reget: true
						})
					})
				}
			},
		},
	}
</script>

<style>
</style>
